import React from 'react'
import axios from 'axios'
import { Route,Routes} from 'react-router-dom'
import './App.css'
import Home from './view/home'
import Fen from './view/fen'
import Car from './view/car'
import Mine from './view/mine'
import { useEffect, useState } from 'react'
function Tab(props) {
  let [index, setindex] = useState(0)
  return (
    <div>
      {
        props.list.map(item => {
          return <span key={item.id} className={index == item.id ? 'active' : ''} onClick={() => {
            setindex(item.id)
          }}>{item.name}</span>
        })
      }
    </div>
  )
}
function App() {
  let [list, setlist] = useState([])
  let [list1, setlist1] = useState([])
  let [list2, setlist2] = useState([])
  useEffect(() => {
    axios.get("http://localhost:3000/list").then((res) => {
      setlist(res.data)
    })
    axios.get("http://localhost:3000/list1").then((res) => {
      setlist1(res.data)
    })
    axios.get("http://localhost:3000/list2").then((res) => {
      setlist2(res.data)
    })
  }, [])
  return (
    <div className='app'>
      <div>
        <Tab list={list}></Tab>
        <Tab list={list1}></Tab>
        <Tab list={list2}></Tab>
      </div>
    </div>
  )
}

export default App